<template>
  <div>
    <MglGeojsonLayer
      :sourceId="pointSource.id"
      :source="pointSource.source"
      :layerId="pointLayer.id"
      :layer="pointLayer"
      @click="isDrawEnd()"
    ></MglGeojsonLayer>
    <MglGeojsonLayer
      :sourceId="lineSource.id"
      :source="lineSource.source"
      :layerId="lineLayer.id"
      :layer="lineLayer"
    ></MglGeojsonLayer>
    <MglGeojsonLayer
      :sourceId="polygonSource.id"
      :source="polygonSource.source"
      :layerId="polygonLayer.id"
      :layer="polygonLayer"
    ></MglGeojsonLayer>
  </div>
</template>

<script>
import { MglGeojsonLayer } from "vue-mapbox";
import { mapGetters } from "vuex";
import { watch } from "fs";
import _ from "lodash";
export default {
  components: {
    MglGeojsonLayer
  },
  data() {
    return {
      pointSource: {
        id: "pointJson",
        source: {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: []
          }
        }
      },
      pointLayer: {
        id: "points",
        type: "circle",
        paint: {
          "circle-color": "#111"
        }
      },
      lineSource: {
        id: "linesJson",
        source: {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: []
          }
        }
      },
      lineLayer: {
        id: "lines",
        type: "line",
        paint: {
          "line-width": 2,
          "line-color": "#111"
        }
      },
      polygonSource: {
        id: "polygonJson",
        source: {
          type: "geojson",
          data: {
            type: "Feature",
            geometry: {
              type: "Polygon",
              coordinates: [
                [
                  [121.46242658520003, 30.79393178321041],
                  [121.46242658520003, 30.79393178321041]
                ]
              ]
            }
          }
        }
      },
      polygonLayer: {
        id: "polygon",
        type: "fill",
        paint: {
          "fill-color": "#000000",
          "fill-opacity": 0.8
        }
      },
      polygonTemp: []
    };
  },

  created() {},
  computed: {
    ...mapGetters(["line", "dotArr", "polygonArr"])
  },
  methods: {
    isDrawEnd() {
      console.log("点击到点了");
      this.$store.dispatch("distances/addLines", []);
      this.$store.dispatch("distances/addDots", []);
      //polygonArr处理
      let finalPoly = _.dropRight(this.polygonTemp);
      finalPoly.push(_.head(finalPoly));
      console.log(finalPoly);
      this.polygonSource.source.data["geometry"]["coordinates"] = [finalPoly];
      this.$emit("polyDrawEnd");
    }
  },
  watch: {
    lineArr: {
      handler(newValue, oldValue) {
        debugger;
        // console.log(JSON.stringify(newValue))
        this.lineSource.source.data.features = newValue;
      },
      deep: true
    },
    dotArr: {
      handler(newValue, oldValue) {
        debugger;
        this.pointSource.source.data.features = newValue;
      },
      deep: true
    },
    polygonArr: {
      handler(newValue, oldValue) {
        // debugger;
        console.log(newValue);
        this.polygonTemp = newValue;
        if (this.polygonTemp.length == 0) {
          this.polygonSource.source.data["geometry"]["coordinates"] = [
            [121.46242658520003, 30.79393178321041],
            [121.46242658520003, 30.79393178321041]
          ];
        }
      },
      deep: true
    }
  }
};
</script>
<style scoped>
</style>